<template>
	<el-row :gutter="20" class="main-container">
		<el-col :span="8">
			<div class="h-100">
				<el-input v-model="searchKey" placeholder="搜索菜单" :suffix-icon="Search" />
				<el-tree
					class="menu-tree"
					:data="menuList"
					accordion
					:props="elTreeProps"
					highlight-current
					@node-click="handleMenuNodeClick"
				/>
			</div>
		</el-col>
		<el-col :span="16">
			<el-card header="编辑菜单">
				<el-alert title="从菜单列表选择一项后，进行编辑" type="info" show-icon :closable="false" />
				<MenuForm ref="menuForm"></MenuForm>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup lang="ts" name="menu1">
import { ref } from "vue";
import { MenuStore } from "@/store/modules/menu";

import { Search } from "@element-plus/icons-vue";
import MenuForm from "./components/MenuForm.vue";

const elTreeProps = {
	label: "title"
};
const searchKey = ref("");
const menuStore = MenuStore();
const { menuList } = menuStore;
const menuForm = ref();

const handleMenuNodeClick = (data: any) => {
	menuForm.value?.acceptParams(data);
};
</script>
<style scoped lang="scss">
.main-container {
	height: 100%;
	.menu-tree {
		margin-top: 10px;
		padding: 15px 10px;
	}
}
</style>
